<template>
	<view style="background-color: #D3FAF1 ;">
		<view class="scl-checkup-page" :style="{
        backgroundImage:'url('+staticImgs.bg+')',
        paddingBottom: '68rpx'
     }" v-if="!isPageLoad">
			<u-navbar leftIconColor="#fff" @leftClick="backToPage" bgColor="transparent">
			</u-navbar>
			<view class="top-main-wrapper">
				<view class="more-info-wrapper">
					<view class="abs-more-info" v-if="recentTestDate">
						<view>
							最近检测：{{recentTestDate}}
						</view>
						<view>
							检测进度：{{detectionProgress}}%
						</view>
					</view>
					<view class="abs-total-report" v-if="isShowTotalReport" @click="showTotalReport()">
						<image class="icon" :src="staticImgs.orderIcon" mode=""></image>
						<text>体检总报告</text>
					</view>
				</view>

				<view class="avatar-box">
					<image class="img" :src="avatarImg" mode="" v-show="avatarImg"></image>
					<!-- {{JSON.stringify(topBubbleArr)}} -->
					<template v-if="renderBubble">
						<template v-for="(item,index) in topBubbleArr">
							<Bubble :useTip="item.isShowGuideTip" :obj="item" v-if="actSclType!=item.type"
								@cusClick="clickBubble(item)" :status="item.moduleHealthStatus" :str="item.remark"
								:outSty="item.out" :innerSty="item.inner" :adsStyle="item.ads" />
						</template>
					</template>
				</view>

			</view>

			<template v-if="canSeeCheckupIntro">
				<view v-if="isPayAfterMode" class="scl-group-info-box-paymode-after"
					:style="{backgroundImage:'url('+staticImgs.box1NoNum+')'}">
					<view class="to-start-btn-wrapper" @click="changeInfoPageStatus(1)">
						<image class="img" :src="staticImgs.btn1" mode=""></image>
						<!-- 开始体检 -->
					</view>
				</view>

				<view v-else class="scl-group-info-box" :style="{backgroundImage:'url('+staticImgs.box1+')'}">
					<view class="text-wrapper">
						包含1个全维测评+5个单维测评
					</view>
					<view class="to-start-btn-wrapper" @click="changeInfoPageStatus(1)">
						<image class="img" :src="staticImgs.btn1" mode=""></image>
						<!-- 开始体检 -->
					</view>
				</view>
			</template>

			<view v-else-if="pageStatus === 2" class="scl-group-list-box">
				<view class="tit-img-box">
					<image class="img" :src="staticImgs.sclListBoxTit" mode=""></image>
				</view>

				<view class="close-abs" @click="changeInfoPageStatus(0)">
					<image class="img" :src="staticImgs.closeIcon"></image>
				</view>

				<view class="main-wrapper">
					<view class="scl-list">
						<view class="scl-box" v-for="(scl,index) in sclList" :key="index">
							<view class="name">{{scl.sclName}}</view>
							<view class="num">X1</view>
							<view class="price">¥{{scl.newOriginalPrice}}</view>
						</view>
					</view>

					<view class="scl-more-info">
						<view class="info-item">
							<view class="label">测评总价</view>
							<view class="price">￥{{sclOtherInfo.sumPrice}}</view>
						</view>
						<view class="info-item">
							<view class="label">优惠减免</view>
							<view class="del-price">-￥{{sclOtherInfo.deratePrice}}</view>
						</view>
						<view class="info-item">
							<view class="label bold-label">实际需付款</view>
							<view class="price bold-price">￥{{sclOtherInfo.price}}</view>
						</view>

					</view>
				</view>


				<view class="button-wrapper" @click="toOrderPay">
					立即支付
				</view>


			</view>

			<view v-else-if="pageStatus === 3" class="scl-info-box">
				<Bubble :str="actSclDetail.remark" :outSty="{width: '166rpx',height: '166rpx'}" :adsStyle="{top:'-38rpx',left:'50%',animation:'none',transform:'translateX(-50%)',
            width: '136rpx',height: '136rpx'
          }" :obj="actSclDetail" :status="actSclDetail.moduleHealthStatus" />
				<view class="name">{{actSclDetail.remark}}</view>
				<view class="scl-name">量表：{{actSclDetail.sclName || ''}}</view>
				<view class="scl-con">{{actSclDetail.existDetails}}</view>
				<!-- {{JSON.stringify(actSclDetail)}} -->
				<view class="start-btn-box" :style="{backgroundImage:'url('+staticImgs.btnBoxBg1+')'}"
					@click="toSclDetail">
					立即检测
				</view>
			</view>

			<view v-else-if="pageStatus == 4" class="scl-result-container">

				<view class="result-box">
					<Bubble :str="actSclDetail.remark" :outSty="{width: '196rpx',height: '196rpx'}" :adsStyle="{top:'-93rpx',left:'50%',animation:'none',transform:'translateX(-50%)',
                width: '196rpx',height: '196rpx'
              }" :innerSty="{width: '196rpx',height: '196rpx'}" :obj="actSclDetail"
						:status="actSclDetail.moduleHealthStatus" />
					<!-- <CustomSclResultCommon :showCanvas="showCanvas" :pageData="pageDataCommon" /> -->

					<view class="tip-name-1">{{actSclDetail.remark}}检测</view>
					<view class="tip-name-2">量表：{{report.name || ''}}</view>
					<view class="label">报告结果</view>
					<view class="tip-name-3">测评时间：{{report.createTime || ''}}</view>

					<view class="res-table-container">
						<view class="data-conclusion-box">
							<view class="label-wrapper">
								<view class="text col-1">维 度</view>
								<view class="text col-2">我的指标</view>
								<view class="text col-3">健康指标</view>
							</view>

							<view class="data-wrapper">
								<view
									:class="[index === 0 ? (item.isOk ? 'head-row' : 'head-row-err') : (item.isOk ? 'row' : 'row-err') ]"
									v-for="(item,index) in report.scoreArr" :key="index">
									<view class="col-1">
										<text class="text">{{item.label}}</text>
									</view>
									<view class="col-2">
										<text class="num" v-show="item.score || item.score === 0">{{item.score}}</text>
									</view>
									<view class="col-3">
										{{item.str}}
										<image v-if="!item.isOk" class="img" :src="staticImgs.warnIcon" mode=""></image>
									</view>
									<view class="col-4">{{item.commonInfo}}</view>
								</view>
							</view>
						</view>
					</view>

					<template v-if="report.detailedResults">
						<view class="dashed-line" style="margin-top: 40rpx; margin-bottom: 20rpx;"></view>
						<view class="detailed-results-box">
							<view class="block-tit-wrapper">
								<view class="icon"></view>
								<view class="text">结果详解</view>
							</view>
							<view class="summary-wrapper" v-if="report.detailedResults.p">
								<view class="tit" v-if="report.detailedResults.tit">{{report.detailedResults.tit}}
								</view>
								<view class="p">{{report.detailedResults.p}}</view>

							</view>
							<image mode="widthFix" class="main-img" v-if="report.detailedResults.img"
								:src="report.detailedResults.img">
								<!-- {{report.detailedResults.img}} -->
							</image>

							<template v-for="(item,index) in report.detailedResults.contentArr">
								<!-- {{JSON.stringify(item)}} -->
								<view class="block">
									<view class="sub-tit" v-if="item.tit">「{{item.tit}}」</view>
									<view v-if="item.p" class="p">{{item.p}}</view>
									<view v-if="item.img" class="sub-img-wrapper">
										<image :src="item.img" class="sub-img" mode="widthFix"></image>
									</view>
									<!-- {{JSON.stringify(item.contentArr)}} -->
									<view v-if="item.contentArr">
										<template v-for="(subItem,subIndex) in item.contentArr">
											<view v-if="subItem.conclusion" class="conclusion">{{subItem.conclusion}}
											</view>
											<view v-if="subItem.p" class="p">{{subItem.p}}</view>
										</template>
									</view>
								</view>
								<view v-if="item.hasLine" class="dashed-line"></view>
							</template>
						</view>
					</template>

				</view>

				<view class="start-btn-box" :style="{backgroundImage:'url('+staticImgs.btnBoxBg1+')'}"
					@click="toSclReportDetail">
					查看详细报告
				</view>

			</view>


			<view v-else-if="pageStatus == 5" class="scl-total-report-container">
				<view class="scl-total-report-wrapper">
					<view class="wrapper-box-tit">
						<image class="img" :src="staticImgs.sclReportBoxTit" mode=""></image>
					</view>

					<view class="share-abs-wrapper" @click="showShareModal">
						<image class="img" :src="staticImgs.shareIcon" mode=""></image>
						邀请体检
					</view>

					<!-- <view class="tip-name-1">{{actSclDetail.remark}}检测</view> -->
					<!-- <view class="tip-name-2">量表：{{report.name || ''}}</view> -->
					<view class="label">报告结果</view>
					<view class="tip-1">测评时间：{{report.createTime || ''}}</view>
					<view class="tip-2">体检人：{{report.nickName}}</view>

					<view class="res-table-container">
						<view class="data-conclusion-box">
							<view class="label-wrapper">
								<view class="text col-1">维 度</view>
								<view class="text col-2">分值</view>
								<view class="text col-3">结果</view>
							</view>

							<view class="data-wrapper">
								<view :class="[(item.isOk ? 'row' : 'row-err')]" v-for="(item,index) in report.scoreArr"
									:key="index">
									<view class="col-1">
										<text class="text">{{item.label}}</text>
									</view>
									<view class="col-2">
										<text class="num" v-if="item.score === 0">0</text>
										<text v-else class="num">{{item.score || '???'}}</text>

									</view>
									<view class="col-3" @click="clickReportBubble(item.label)">
										<image v-if="!item.isOk" class="img" :src="staticImgs.warnIcon" mode=""></image>
										{{item.str}}
									</view>
								</view>
							</view>
						</view>
					</view>


					<view class="more-con-box" v-if="false">
						全维身心健康监测可以协助您从多个方面来了解自己的心理健康程度，对你的整体情况做一个风险评估。
						有了整体评估，才能更有针对性的进行后续检测，快去完成全维度身心检测吧~
					</view>
				</view>
			</view>
		</view>




		<template v-if="!isPageLoad">
			<DialogMask v-if="showTipModal && tipObj && tipObj.content" @click="dialogClose">
				<template #content>
					<text v-if="tipObj.is13" class="tip-t13">
						你购买的测评已经测试完成了哦~
					</text>
					<text v-else-if="tipObj.useDivColor">
						<text>
							{{tipObj.outValArr[0]}}
						</text>
						<text :style="{color:tipObj.contentColor}">
							{{tipObj.insertVal}}
						</text>
						<text>
							{{tipObj.outValArr[1]}}
						</text>
					</text>
					<text v-else>
						{{tipObj.content || ''}}
					</text>
				</template>

				<template #btn1 v-if="tipObj.btnNum > 0 && tipObj.leftBtn.txt">
					<view class="btn-normal btn-base" :style="[lStyle]"
						@click.stop="setCurrentTipIndex(tipObj.leftBtn,'leftBtn')">
						{{tipObj.leftBtn.txt}}
					</view>
				</template>
				<template #btn2 v-if="tipObj.btnNum > 1 && tipObj.rightBtn.txt">
					<view class="btn-normal btn-base" :style="[rStyle]"
						@click.stop="setCurrentTipIndex(tipObj.rightBtn,'rightBtn')">
						{{tipObj.rightBtn.txt}}
					</view>
				</template>

			</DialogMask>

			<PosterModal @close="posterModalVisible=false" :visible="posterModalVisible" :clientUserUid="clientUserUid">
			</PosterModal>
		</template>



		<view style="position: fixed; top: -9999rpx">
			<!-- #ifdef MP-WEIXIN -->
			<canvas id="dcanvas" type="2d" style="zoom: 50%;width: 750px; height: 1360px;" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<canvas canvas-id="dcanvas" id="dcanvas" style="zoom: 50%;width: 750px; height: 1360px;" />
			<!-- #endif -->
		</view>

		<TLoading ref="tLoading" />
		<FloatBaclSclList v-if="isShowFloatBack" />
	</view>
</template>

<script>
	import {
		removeEmptyProperty
	} from '@/common/utils/util.js'
	import Bubble from './Bubble.vue'
	import DialogMask from './DialogMask.vue'
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		updateUserInfo
	} from '@/common/api/user_api.js'

	import {
		unescape
	} from '@/common/utils/util.js'
	import PosterModal from './PosterModal.vue'
	import TLoading from '@/components/tt-loading.vue'
	import FloatBaclSclList from '@/subcontractorC/components/float-back-scl-list/index.vue'

	export default {
		components: {
			Bubble,
			DialogMask,
			PosterModal,
			TLoading,
			FloatBaclSclList
		},
		data() {
			return {
				staticImgs: {
					bg: this.imgBaseURL + '/scl/checkup-mental/bg-1.png',
					box1: this.imgBaseURL + '/scl/checkup-mental/box-1-v2.png',
					box1NoNum: this.imgBaseURL + '/scl/checkup-mental/box-1-v3.png',
					btn1: this.imgBaseURL + '/scl/checkup-mental/btn-1.png',
					maleAvatar: this.imgBaseURL + '/scl/checkup-mental/male-avatar.png',
					femaleAvatar: this.imgBaseURL + '/scl/checkup-mental/female-avatar.png',
					sad_maleAvatar: this.imgBaseURL + '/scl/checkup-mental/sad-male-avatar.png',
					sad_femaleAvatar: this.imgBaseURL + '/scl/checkup-mental/sad-female-avatar.png',
					defaultAvatar: this.imgBaseURL + '/scl/checkup-mental/default-avatar.png',
					sclListBoxTit: this.imgBaseURL + '/scl/checkup-mental/scl-list-box-tit.png',
					closeIcon: this.imgBaseURL + '/scl/close-icon.png',
					btnBoxBg1: this.imgBaseURL + '/scl/info-box-btn.png',
					warnIcon: this.imgBaseURL + '/scl/checkup-mental/warning-icon.png',
					shareIcon: this.imgBaseURL + '/scl/checkup-mental/share-icon.png',
					sclReportBoxTit: this.imgBaseURL + '/scl/checkup-mental/scl-report-box-tit.png',
					orderIcon: this.imgBaseURL + '/scl/checkup-mental/order-icon.png',
				},
				gender: 0,

				infoPageStatus: 1, //0 - 展示体检包基本信息，1 - 展示体检包包含的测评及价格
				pageLoading: false,
				sclList: [],
				sclOtherInfo: {},
				payGroupId: '',
				actSclDetail: {},
				showTipModal: false,
				tipsList: [],
				tipObj: {},
				currentTipIndex: 0,
				currentTipKey: 'T1',
				topBubbleArr: [],
				recentTestDate: '', //this.$dayjs().format('YYYY-MM-DD'),
				detectionProgress: 0,
				renderBubble: true,
				showCanvas: false,
				pageDataCommon: {},
				showResult: false,
				report: {},
				pageComp: '',
				totalReportPageVisible: false,
				posterModalVisible: false,
				isDoneQWD: false,
				totalReportEnd: false,
				shareData: {
					title: '个人心理健康体检中心',
					path: '/pages/index/index?userType=check-up',
					imageUrl: this.imgBaseURL + '/share/share-checkup.png',
					desc: '',
					content: ''
				},
				isPayAfterMode: true, //预留开关 防止后续改为先付后测
				fromSclId: '',
				opts: {},
				isFromResult: false,
				isShowFloatBack: false,
				checkBool: true,
				isPageLoad:true
			}
		},
		computed: {
			...mapGetters('user', [
				'clientUserUid',
				'uGender',
				'hasCheckupTipEnd',
				'canSeeCheckupIntro'
			]),
			...mapState({
				'isPaySclExamination': state => state.user.isPaySclExamination, //是否已购买测评体检包
				userJson: state => state.user.userJson,
			}),
			avatarImg() {
				let sexCode = this.uGender || 0
				// 性别(字典 0未知 1男 2女)
				let avatarArr = []

				try {
					if (this.report.scoreArr?.some(item => !item.isOk)) {
						avatarArr = [this.staticImgs.defaultAvatar, this.staticImgs.sad_maleAvatar, this.staticImgs
							.sad_femaleAvatar
						]
					} else {
						avatarArr = [this.staticImgs.defaultAvatar, this.staticImgs.maleAvatar, this.staticImgs
							.femaleAvatar
						]
					}
				} catch (err) {

				}



				return avatarArr[sexCode] //this.staticImgs.defaultAvatar
			},
			pageStatus() {
				// 1 - 未购买样式(体检包基础介绍)，2 - 展示体检包介绍（包含的测评及相应价格）样式，3 - 展示体检包详情 并 根据其
				// if(this.showResult){

				// return 3

				if (this.totalReportPageVisible) {
					return 5
				} else if (this.actSclDetail?.isSclReport == 'Y') {
					return 4
				} else if (this.isPaySclExamination) {
					return 3
				}
				// else if (this.infoPageStatus === 0 ) {
				//   return 1
				// }
				else if (this.infoPageStatus === 1) {
					return 3
				}

				return 0
			},
			showGenderChoice() {
				return (this.pageStatus == 3 && this.uGender === 0)
			},
			lStyle() {
				if (this.tipObj.btnNum > 1 && !this.tipObj.leftBtn.style) {
					return {
						backgroundColor: '#5EB7FF'
					}
				} else {
					return this.tipObj?.leftBtn?.style
				}
			},
			rStyle() {
				return this.tipObj?.rightBtn?.style
			},
			actSclType() {
				return (this.pageStatus === 1 || this.pageStatus == 5) ? -1 : this.actSclDetail.type
			},
			isShowTotalReport() {
				return this.isPaySclExamination && this.isDoneQWD
			}
		},
		watch: {
			tipObj(val) {
				if (val && val.content) {
					const content = val.content
					const match = content.match(/\{([^}]+)\}/);
					if (match) {
						val.useDivColor = true
						val.insertVal = match[1]
						const parts = content.split(/\{[^}]*\}/);
						val.outValArr = parts
					}
				}
				console.log(val, '=====val')
				// const match = content.match(/\{([^}]+)\}/);

			}
		},
		onLoad(opts) {
			console.log(opts, '-------opts')
			this.opts = opts
			this.isFromResult = opts?.from == 'result'
			this.initData();
		},
		methods: {
			initData() {
				this.$refs.tLoading.show()
				const opts = this.opts

				this.initPageInfo()
				if (this.isPaySclExamination) {
					this.checkTotalReport()
				} else if (!this.canSeeCheckupIntro) {
					this.initCheckSclGroupTipInfo()
				} else {
					this.actSclDetail = {
						remark: '',
						type: undefined
					}
				}

				this.checkIsShowFloatBack()

				console.log(this.userJson, '---------userJson---------')
				console.log(this.canSeeCheckupIntro, '----this.canSeeCheckupIntro--')

				if (!this.canSeeCheckupIntro) {
					if (this.opts.from == 'qy') {
						const item = this.topBubbleArr.find(item => item.sclId === this.opts.sclId)
						if (item?.isSclReport == 'N') {
							this.clickReportBubble(item.type)
						}
					}
				}
				this.addLog(opts)
				//获取上一页面的路由信息
				let allPages = getCurrentPages(); //获取当前页面栈的实例；
				try {
					this.fromSclId = this.opts.sclId
				} catch (e) {

				}

				this.$refs.tLoading.hide()
			},
			checkIsShowFloatBack() {
				if (!this.checkBool) return

				if (!this.isPaySclExamination) {
					return this.isShowFloatBack = false
				}

				//获取上一页的路径，判断是否是sclList
				let allPages = getCurrentPages()
				if (allPages.length > 1) {
					let prePage = allPages[allPages.length - 2]
					if (prePage.route == 'pages/sclList/sclList') {
						return this.isShowFloatBack = false
					}
				}

				this.isShowFloatBack = true
			},
			dialogClose() {
				console.log('dialogClose------')
				if (this.currentTipKey != 'T2') {
					//this.showTipModal = false
				}
			},
			updateFinalTip() {
				let tmpJsonStr
				try {
					tmpJsonStr = JSON.parse(this.userJson)
					tmpJsonStr = JSON.stringify({
						...tmpJsonStr,
						hasCheckupTipEnd: 'Y'
					})
				} catch (e) {
					tmpJsonStr = JSON.stringify({
						hasCheckupTipEnd: 'Y'
					})

				}

				updateUserInfo({
					userJson: tmpJsonStr
				}).then(res => {
					this.$store.commit('user/setUserJson', tmpJsonStr)
				})
			},
			updateUserJson(param) {
				let tmpJsonStr
				let tmpObj = {}
				try {
					tmpJsonStr = JSON.parse(this.userJson)
					tmpObj = {
						...tmpJsonStr
					}
					tmpObj[param] = 'Y'
					tmpJsonStr = JSON.stringify(tmpObj)
					this.$u.api.updateUserInfo({
						userJson: tmpJsonStr
					}).then(res => {
						console.log(tmpJsonStr, '-------tmpJsonStr------')
						this.$store.commit('user/setUserJson', tmpJsonStr)
					})
				} catch (e) {}
			},
			async addLog(opts) {
				const {
					data: res
				} = await this.$u.api.getCheckUpList()
				this.sclOtherInfo = res.data

				if (!res.success) {
					// 错误提示
					uni.showModal({
						title: res.message,
						showCancel: false,
						confirmText: '回到大厅',
						confirmColor: '#666',
						success: res => {
							if (res.confirm) {
								uni.showLoading()
								uni.reLaunch({
									url: '/pages/sclList/sclList',
									success: () => uni.hideLoading()
								})
							}
						}
					})
					return
				}

				if (opts.sourceType || opts.sourseType) {
					this.$u.api.addLog({
						sclId: this.sclOtherInfo.sclId,
						sourseType: opts.sourceType || opts.sourseType
					})
				}else{
					this.$u.api.addLog({
						sclId: this.sclOtherInfo.sclId,
						sourseType: 0
					})
				}
			},
			showShareModal() {
				this.posterModalVisible = true
			},
			async checkTotalReport() {
				let totalOk = true
				const {
					data: res
				} = await this.$u.api.getCheckupSclTotalReport()
				const dRes = res.data
				dRes.resultList.map(item => {
					if (item.isSclReport == 'N') {
						totalOk = false
					}
				})

				// this.sclList.map(item=>{

				//   const obj = dRes.resultList.find(subItem=>subItem.sclId==item.sclId)

				// })

				this.totalReportEnd = totalOk

				if (totalOk) {
					this.showTotalReport(dRes)
					console.log(this.hasCheckupTipEnd, '=========this.hasCheckupTipEnd')

					if (!this.hasCheckupTipEnd) {
						// this.$refs.tLoading.show()
						await this.initCheckSclGroupTipInfo()
						// this.$refs.tLoading.hide()
					}

				} else {
					await this.initCheckSclGroupTipInfo()
				}
			},
			async showTotalReport(otherData) {
				// this.$refs.tLoading.show()
				let dRes
				if (!otherData) {
					const {
						data: res
					} = await this.$u.api.getCheckupSclTotalReport()
					dRes = res.data
				} else {
					dRes = otherData
				}

				const tmpScoreArr = []
				dRes.resultList.map(item => {
					tmpScoreArr.push({
						label: item.remark,
						score: item.score,
						str: item.healthType,
						isOk: item.isSclReport == 'Y' ? parseInt(item.score) < Number(item.qujian) :
							'Y'
					})
				})

				this.report = {
					createTime: this.$dayjs(dRes.createDate).format("YYYY-MM-DD HH:mm"),
					nickName: dRes.nickName,
					scoreArr: tmpScoreArr,
				}

				this.$refs.tLoading.hide()
				this.totalReportPageVisible = true

				this.actSclDetail = {
					remark: '',
					type: undefined
				} // 不要删除，用于清理actSclName
			},
			async initPageInfo() {
				const {
					data: res
				} = await this.$u.api.getCheckUpSclDetail(removeEmptyProperty({
					sclId: this.opts.sclId
				}))

				this.setProgress(res)
				this.sclList = res.data.sclExaminationDetailBOS
				console.log(this.sclList, '-------this.sclList------')
				const qydItem = this.sclList.find(item => item.type === 0) //全维度

				if (qydItem.isSkipReport && qydItem.isSkipReport == 'Y') {
					uni.redirectTo({
						url: '/subcontractorB/pages/sclResult/sclResult?id=' + qydItem
							.sclExaminationReprotId +
							'&sclReportType=1'
					})
					return
				}
				if (this.sclList.length > 0 && (this.opts.from != 'qy' || (this.opts.from == 'qy' && qydItem
						?.isSclReport == 'Y'))) {
					this.actSclDetail = res.data.sclExaminationDetailBOS.find(item => item.sclId === this.opts.sclId)
					if (!this.actSclDetail || !Object.keys(this.actSclDetail).length) {
						this.actSclDetail = res.data.sclExaminationDetailBOS[res.data.sclExaminationDetailBOS.length -
							1]
						for (let i = 0; i < this.sclList.length; i++) {
							if (this.sclList[i].isSclReport == 'N') {
								this.actSclDetail = this.sclList[i]
								break
							}
						}
					}

					const qwdScl = res.data.sclExaminationDetailBOS.find(obj => obj.type === 0)
					this.isDoneQWD = qwdScl.isSclReport == 'Y'
				}
				this.isPageLoad = false
				this.setTopBubbleArr(res.data.sclExaminationDetailBOS)
			},
			async initCheckSclGroupTipInfo(isNewPay) {
				const tmpFrom = uni.getStorageSync('from')
				const tmpHasDoneCheckupScl = uni.getStorageSync('hasDoneCheckupScl')
				const tmpCheckupSclId = uni.getStorageSync('checkupSclId')

				console.log(tmpFrom, '----tmpFrom')
				console.log(tmpCheckupSclId, '-----tmpCheckupSclId')
				let hasSclAnswer = false
				if (!tmpFrom) {
					console.log(uni.getStorageSync(`sclAnswer-${tmpCheckupSclId}`))
					hasSclAnswer = !!uni.getStorageSync(`sclAnswer-${tmpCheckupSclId}`) ? 'Y' : 'N'
				}
				console.log(hasSclAnswer, '-----hasSclAnswer---')

				const submitForm = removeEmptyProperty({
					isFinishScl: this.isFromResult ? 'Y' : 'N',
					isSclQstn: (tmpHasDoneCheckupScl || hasSclAnswer),
					sclId: this.opts.sclId,
				})

				const {
					data: res
				} = await this.$u.api.getCheckUpSclTextList(submitForm)
				if (this.isFromResult) {
					this.isFromResult = false
				}
				if (res.code == 200) {
					this.tipsList = res.data.jsonArray

					if (res.data.showKey) {
						if (res.data.showKey == 'T1') {
							this.updateUserJson('canSeeCheckupIntro')
						}

						this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === res.data.showKey)
						this.currentTipKey = res.data.showKey
						this.tipObj = this.tipsList[this.currentTipIndex]

						this.$nextTick(() => {
							console.log(tmpFrom, '----tmpFrom----')
							if ((tmpFrom != 'afterPayScl90Page' && tmpFrom != 'afterPayPage') || this
								.currentTipKey == 'T35') {
								this.showTipModal = true
							} else {
								this.showTipModal = false
							}
							uni.removeStorageSync('from')
							uni.removeStorageSync('hasDoneCheckupScl')
						})
					} else {
						this.tipObj = this.tipsList[0]
						this.currentTipKey = this.tipObj.key
						this.currentTipIndex = 0
					}

					this.tipObj.is13 =
						false //this.tipObj.content == '你的抑郁检测结果在当前阶段有些异常，但这不代表是你的最终结果~可以多关注自己的情绪，如有必要可进行专业的心理辅导哦~'

					console.log(this.tipsList, '================this.tipsList')
				}

			},
			async setCurrentTipIndex(targetObj, side) {
				const key = targetObj.next
				console.log(this.tipsList[this.currentTipIndex], '---targetObj')

				// if(targetObj.type != 'skip'){
				await this.$u.api.updateCheckUpSclText({
					showKey: this.tipsList[this.currentTipIndex].key,
					btn: side
				})
				// }

				if (targetObj.type == 'close') {
					if (this.totalReportEnd) {
						this.updateFinalTip()
					}
					console.log(this.tipsList[this.currentTipIndex], '----this.tipsList[this.currentTipIndex]----')
					if (this.tipsList[this.currentTipIndex] && (this.tipsList[this.currentTipIndex].key == 'T40' ||
							this.tipsList[this.currentTipIndex].key == 'T39')) {
						console.log(this.actSclDetail, '=====this.actSclDetail=====')
						setTimeout(() => {
							this.checkBool = false
							if (this.isPaySclExamination) {
								this.isShowFloatBack = true
							}
						}, 500)
						uni.navigateTo({
							url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON
								.stringify({
									sclId: this.actSclDetail.sclId,
									sclReportType: 1,
									showCheckupPrice: this.fromSclId == this.actSclDetail.sclId,
									toUnlock: 1
								})
						})
					}

					return this.showTipModal = false
				} else if (targetObj.type == 'skip') {

					console.log(this.fromSclId, targetObj, '-------targetObj')
					setTimeout(() => {
						this.checkBool = false
						if (this.isPaySclExamination) {
							this.isShowFloatBack = true
						}
					}, 500)
					return uni.navigateTo({
						url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
							sclId: targetObj.next,
							sclReportType: 1,
							showCheckupPrice: this.fromSclId == targetObj.next
						}),
						success: () => {
							this.showTipModal = false
						}
					})
				}

				if (this.currentTipKey == 'T2') {
					this.changeGender(key == 'T3' ? 2 : 1)
				} else if (targetObj.txt == '沿用历史结果') {
					await this.$u.api.giveScl()
					await this.initPageInfo()
					await this.initCheckSclGroupTipInfo()
				}

				this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === key)
				this.currentTipKey = key

				this.tipObj = this.tipsList[this.currentTipIndex]
			},
			toSclDetail() {
				console.log(this.actSclDetail, '----this.actSclDetail')
				setTimeout(() => {
					this.checkBool = false
					if (this.isPaySclExamination) {
						this.isShowFloatBack = true
					}
				}, 500)
				uni.navigateTo({
					url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
						sclId: this.actSclDetail.sclId,
						sclReportType: 1,
						showCheckupPrice: this.fromSclId == this.actSclDetail.sclId
					})
				})
			},
			toSclReportDetail() {
				setTimeout(() => {
					this.checkBool = false
					if (this.isPaySclExamination) {
						this.isShowFloatBack = true
					}
				}, 500)
				uni.navigateTo({
					url: '/subcontractorB/pages/sclResult/sclResult?id=' + this.actSclDetail
						.sclExaminationReprotId +
						'&sclReportType=1'
				})
			},
			changeGender(gender) {
				// this.$refs.tLoading.show()
				updateUserInfo({
					sex: gender
				}).then(res => {
					if (res.data.code == 200) {
						let userInfo = this.$store.getters['user/getUserInfo'];
						console.log(userInfo, '----userInfo----')

						userInfo.sex = gender
						this.$store.commit('user/setUserInfo', userInfo)
					} else {
						this.$showToast(res.data.message)
					}
				}).finally(() => {
					// uni.hideLoading()
					// this.$refs.tLoading.hide()
				})
			},
			backToPage() {
				// 获取是否存在上一页面，如果不存在则返回到测评大厅
				const pages = getCurrentPages()

				if (pages.length === 1) {
					uni.reLaunch({
						url: '/pages/sclList/sclList'
					})
				} else {
					uni.navigateBack()
				}
			},
			async getSclListInfo() {
				const {
					data: res
				} = await this.$u.api.getCheckUpList()
				this.sclList = res.data.sclExaminationBOS
				this.sclOtherInfo = res.data
				this.sclOtherInfo.deratePrice = Math.abs(this.sclOtherInfo.deratePrice)
				this.payGroupId = this.sclOtherInfo.sclId

				this.setTopBubbleArr(res.data.sclExaminationBOS)
			},
			async clickReportBubble(type) {

				const item = this.topBubbleArr.find(item => item.type === type)
				this.actSclDetail = item
				await this.getSclDetail(item)
				this.totalReportPageVisible = false
			},
			clickBubble(item) {
				console.log(item.type, '------item-------', this.isDoneQWD)


				if (this.isPaySclExamination &&
					(item.type == 0 || (item.type != 0 && this.isDoneQWD))
				) {
					this.actSclDetail = item
					if (item?.isSclReport == 'Y') {
						this.getSclDetail(item)
					}
					this.totalReportPageVisible = false
				} else if (item.type === 0) {

					const tmp = this.topBubbleArr.find(item => item.remark === '双相')
					console.log(tmp, '===tmp===')
					// 如果包含双相测评，则点击无效
					if (tmp) {
						return
					}

					this.actSclDetail = item
					if (item.sclExaminationReprotId) {
						this.getSclDetail(item)
					}
					this.totalReportPageVisible = false
					this.isDoneQWD = true
				} else if (item.type === 1 && this.isDoneQWD) {
					this.actSclDetail = item
					// if (item.isSclReport == 'Y') {
					this.getSclDetail(item)
					// }
					this.totalReportPageVisible = false
				} else if (item.type === 1) {
					const qwdScl = this.sclList.find(obj => obj.type === 0)
					if (qwdScl?.isSclReport == 'Y') {
						this.actSclDetail = item
						this.getSclDetail(item)
						this.totalReportPageVisible = false
					}
				}
				// else{
				//   this.actSclDetail = item
				//   console.log(item,'----itemitemitemitem--------')
				//   // if (item.isSclReport == 'Y') {
				//     this.getSclDetail(item)
				//   // }
				//   this.totalReportPageVisible = false
				// }

				console.log(this.actSclDetail, '----this.actSclDetail')

			},
			async getSclDetail(item) {
				item = item || {}
				// this.$refs.tLoading.show()
				console.log(item, '-----------getSclDetail')
				//下面是测评结果
				const {
					data: res
				} = await this.$u.api.getCheckUpSclDetail(removeEmptyProperty({
					sclExaminationReprotId: item.sclExaminationReprotId,
					sclId: this.opts.sclId
				}))

				if (res?.data.sclReportResultShow) {
					try {
						this.processResultDataToRenderDataPageCommonSpecial(res.data.sclReportResultShow.data)
					} catch (e) {}
				}
			},
			processResultDataToRenderDataPageA(dData) {
				console.log(dData, '=======dData')
				const result = dData.resultList[0]
				const resultDetailTmpArr = result.resultDesc.split('====')
				//结果详情下的数组
				let resultDetailListTmpArr = []
				if (resultDetailTmpArr.length > 1) {
					const tmpArr = resultDetailTmpArr[1].split('----')
					resultDetailListTmpArr = tmpArr.map(item => {
						const tmp = item.split('++++')
						return {
							tit: tmp[0],
							p: tmp[1]
						}
					})
				}

				const mainResult = JSON.parse(dData.scloReportDetail)
				//最终结论
				const conclusionStr = result.resultTitle.split("（")[0]

				//维度信息
				const tmpScoreArr = dData.resultSetMap.map(item => {
					return {
						label: item.dmnsName,
						score: parseInt(item.myScore),
						str: item.myIndex,
						commonInfo: item.healthIndex
					}
				})




				dData.createDate = Number(dData.createDate)


				//最终完成的破事
				this.report = {
					id: this.reportId,
					serialNumber: dData.serialNumber,
					name: dData.sclName,
					sclTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
					conclusion: conclusionStr,
					createTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
					scoreArr: tmpScoreArr,

					detailedResults: {
						tit: result.resultTitle,
						p: resultDetailTmpArr[0],
						contentArr: resultDetailListTmpArr
					},
				}
			},
			processResultDataToRenderDataPageCommonSpecial(dData) {
				const result = dData.resultList[0]
				const mainResultD = dData.scloReportDetail ? JSON.parse(dData.scloReportDetail) : {}

				if (dData.specialType == 'beike') {
					this.processResultDataToRenderDataPageA(dData)
				} else if (mainResultD && mainResultD.pageType == 'SCL90') {
					//SCL90
					return this.processResultDataToRenderDataPageSCL90(dData)
				} else if (JSON.stringify(mainResultD) != '{}') {

				} else {
					return this.processResultDataToRenderCommonData(dData)
				}
			},
			extractNumbers(str) {
				// 使用正则表达式 \d+ 匹配所有的数字
				const regex = /\d+/g;
				const numbers = str.match(regex);
				return numbers ? numbers.map(Number) : [];
			},
			processResultDataToRenderCommonData(dData) {
				const result = dData.resultList[0]
				const mainResultD = dData.scloReportDetail ? JSON.parse(dData.scloReportDetail) : {}
				const resultDetails = JSON.parse(unescape(result.resultDesc))

				this.pageComp = 'IRS'
				resultDetails.scoreArr[0].healthScore = unescape(resultDetails.scoreArr[0].healthScore)
				//最终结论
				const conclusionStr = resultDetails.conclusionStr

				//维度信息
				const tmpScoreArr = resultDetails.scoreArr.map(item => {
					console.log(item,
						'-----------------------------------------processResultDataToRenderCommonData-')
					return {
						label: item.label,
						score: parseInt(result.score),
						str: resultDetails.conclusionStr,
						commonInfo: unescape(item.healthScore),
						isOk: parseInt(result.score) < this.extractNumbers(unescape(item.healthScore))
					}
				})

				//常模信息
				const commonModel = resultDetails.normComparison

				resultDetails.sciencePopularization.contentArr.map(item => {
					item.p = unescape(item.p)
				})

				const tmpLiteratrue = resultDetails.literature || resultDetails.reference

				dData.createDate = Number(dData.createDate)
				try {
					resultDetails.detailedResults.contentArr = resultDetails.detailedResults.contentArr.map((item,
						index) => {

						return {
							...item,
							hasLine: index == resultDetails.detailedResults.contentArr.length - 1 ? false : true
						}

					})
				} catch (e) {
					console.log(e)
				}

				this.report = {
					id: this.reportId,
					serialNumber: dData.serialNumber,
					name: dData.sclName,
					sclTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
					conclusion: conclusionStr,
					createTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
					scoreArr: tmpScoreArr,
					normComparison: commonModel,
					detailedResults: resultDetails.detailedResults,
				}
			},
			processResultDataToRenderDataPageSCL90(dData) {
				this.pageComp = 'SCL90'
				const result = dData.resultList[0]
				const resultDetails = JSON.parse(unescape(result.resultDesc))

				//结果详情下的数组
				let resultDetailListTmpArr = []
				const mainDataContentArr = []
				if (dData.resultList.length > 1) {
					resultDetailListTmpArr = dData.resultList.slice(1, dData.resultList.length).map(item => {
						const sectionData = JSON.parse(unescape(item.resultDesc))
						return {
							tit: item.dmnsName,
							conclusion: sectionData.conclusion,
							p: sectionData.intro,
							suggestions: sectionData.suggestions
						}
					})
				}

				//维度信息
				const categoriesArr = []
				const commonModelData = []
				const myModelData = []
				let tmpScoreArr = []
				const commonModelInfo = resultDetails.scoreArr
				tmpScoreArr = dData.resultSetMap.map((item, index) => {
					const currentHeathNum = commonModelInfo.find(node => item.dmnsName === node.label).healthIndex
					const currentConclusion = resultDetailListTmpArr.find(node => item.dmnsName === node.tit)
					categoriesArr.push(item.dmnsName)
					commonModelData.push(Number(currentHeathNum))
					myModelData.push(Number(item.myScore))

					return {
						label: item.dmnsName,
						score: parseInt(item.myScore),
						str: currentConclusion.conclusion,
						commonInfo: '<' + currentHeathNum,
						isOk: parseInt(item.myScore) < Number(currentHeathNum)
					}
				})

				tmpScoreArr.unshift({
					label: "总分",
					score: result.score,
					str: resultDetails.shortConclusion,
					commonInfo: '<' + resultDetails.healthNum,
					isOk: parseInt(result.score) < Number(resultDetails.healthNum)
				})

				dData.createDate = Number(dData.createDate)
				const pageDataB = {
					id: this.reportId,
					serialNumber: dData.serialNumber,
					name: dData.sclName,
					conclusion: resultDetails.conclusion,
					createTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
					scoreArr: tmpScoreArr,
				}

				this.report = pageDataB
			},
			setProgress(res) {
				if (res.data.lastDetectionTime) {
					this.recentTestDate = this.$dayjs(res.data.lastDetectionTime).format('YYYY-MM-DD')
				} else {
					this.recentTestDate = ''
				}

				this.detectionProgress = res.data.detectionProgress ? res.data.detectionProgress.toFixed(1) : 0
			},
			setTopBubbleArr(arr) {
				this.topBubbleArr = []
				const tmpStyleArr = [{ // 全维度
					type: 0,
					ads: {
						bottom: '100rpx',
						left: '0',
						animationDelay: '2.4s'
					},
					inner: {
						width: '154rpx',
						height: '154rpx'
					},
					out: {
						width: '190rpx',
						height: '190rpx'
					},
				}, { // 抑郁 双相
					type: 1,
					ads: {
						bottom: '100rpx',
						right: '100rpx',
						animationDelay: '1.2s'
					},
				}, { // 焦虑
					type: 2,
					ads: {
						top: '136rpx',
						right: '-48rpx',
						animationDelay: '2.4s'
					},
					// inner:{},
					// out:{},
				}, { // 人际关系
					type: 3,
					ads: {
						bottom: '92rpx',
						right: '-90rpx',
						animationDelay: '1.8s'
					},
					// inner:{},
					// out:{},
				}, { // 压力
					type: 4,
					ads: {
						top: '160rpx',
						left: '-90rpx',
						animationDelay: '0.6s'
					},
					// inner:{},
					// out:{},
				}, { //敏感
					type: 5,
					ads: {
						top: '0',
						left: '-6rpx',
						animationDelay: '0.8s'
					},
					// inner:{},
					// out:{},
				}]
				for (let i = 0; i < arr.length; i++) {
					const objStyle = tmpStyleArr.find(obj => obj.type == arr[i].type)

					this.topBubbleArr.push({
						...arr[i],
						name: arr[i].sclName,
						...objStyle,
					})
				}

				console.log(this.topBubbleArr, '=====this.topBubbleArr')
			},
			toOrderPay() {
				const that = this
				const arr = this.$SUBSCRIBE_CODES

				uni.getSetting({ //getSetting获取用户的当前设置
					withSubscriptions: true,
					success: res => {
						console.log('res >>>>', res);
						if (res.subscriptionsSetting.mainSwitch &&
							res.subscriptionsSetting &&
							res.subscriptionsSetting[arr[0]] == 'accept' &&
							res.subscriptionsSetting[arr[1]] == 'accept' &&
							res.subscriptionsSetting[arr[2]] == 'accept') {
							that.$u.debounce(that.orderPay, 200)
						} else {
							uni.requestSubscribeMessage({
								tmplIds: arr,
								success(res) {
									console.log('成功');
									that.$u.debounce(that.orderPay, 200)
								},
								fail(res) {
									console.log('失败');
									that.$u.debounce(that.orderPay, 200)
								}
							})
						}
					}
				})
			},
			orderPay() {
				if (this.pageLoading) return
				let that = this;
				this.pageLoading = true
				const submitForm = removeEmptyProperty({
					orderType: '12',
					sclId: this.payGroupId
				})
				// uni.showLoading()
				// this.$refs.tLoading.show()
				this.$u.api.addLog({
					sclId: this.sclOtherInfo.sclId,
					sourseType: 1
				})
				this.$u.api.orderPay(submitForm).then(res => {
					if (res.data.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							service: 5,
							orderInfo: res.data.data.wr,
							timeStamp: res.data.data.wr.timeStamp,
							nonceStr: res.data.data.wr.nonceStr,
							package: res.data.data.wr.packageValue,
							signType: res.data.data.wr.signType,
							paySign: res.data.data.wr.paySign,
							success: function(res) {
								console.log(res, '================= uni.requestPayment - res')
								that.pageLoading = false
								that.showTipModal = true
								that.initPageInfo()
								that.initCheckSclGroupTipInfo(true)
								that.$store.commit('user/setIsPaySclExamination', true)
							},
							fail: function(err) {
								that.pageLoading = false
							}
						})
					} else {
						that.$showToast(res.data.message);
						this.pageLoading = false
					}

				}).catch(() => {
					this.pageLoading = false
				})

			},
			async changeInfoPageStatus(status) {
				this.$refs.tLoading.show()
				if (status == 1) {
					console.log(this.canSeeCheckupIntro, '----canSeeCheckupIntro----')
					this.updateUserJson('canSeeCheckupIntro')
				}
				this.infoPageStatus = status
				// this.$refs.tLoading.show()
				await this.initPageInfo()
				await this.checkTotalReport()
				// this.$refs.tLoading.hide()
				if (status == 1) {
					if (this.opts.from == 'qy') {
						const item = this.topBubbleArr.find(item => item.sclId === this.opts.sclId)
						if (item?.isSclReport == 'N') {
							this.clickReportBubble(item.type)
						}
					}
				}
				this.$refs.tLoading.hide()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tip-t13 {
		color: #290101;
		font-weight: 500;
		font-style: italic;
	}

	.scl-checkup-page {
		width: 100%;
		height: 100vh;
		overflow: scroll;
		overflow-x: hidden;


		background-size: 100%;
		background-repeat: no-repeat;
		// overflow: hidden;
		box-sizing: border-box;

		// background-color: red;

		.top-main-wrapper {
			padding-top: 360rpx;
			// position: relative;


			.more-info-wrapper {
				width: 100%;
				height: 0;
				border: 0;
				padding: 0;
				position: relative;

				.abs-more-info {
					position: absolute;
					top: -110rpx;
					left: 28rpx;

					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: justify;
					font-style: normal;
				}

				.abs-total-report {
					position: absolute;
					top: -110rpx;
					right: 12rpx;

					width: 177rpx;
					height: 60rpx;
					background: rgba(84, 191, 231, 0.7);
					border-radius: 4rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					font-family: PingFang-SC, PingFang-SC;
					// font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: justify;
					font-style: normal;

					.icon {
						width: 22rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}

			}


			.avatar-box {
				width: 490rpx;
				height: 540rpx;
				margin: auto;
				position: relative;



				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.scl-group-info-box {
			width: 690rpx;
			height: 678rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;
			padding-bottom: 48rpx;


			.text-wrapper {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #326876;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
			}

			.to-start-btn-wrapper {
				height: 98rpx;
				width: 338rpx;
				margin-top: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

		}

		// .scl-group-info-box -- end



		.scl-group-info-box-paymode-after {
			width: 690rpx;
			height: 636rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;
			padding-bottom: 48rpx;


			.text-wrapper {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #326876;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
			}

			.to-start-btn-wrapper {
				height: 98rpx;
				width: 338rpx;
				margin-top: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

		}

		// .scl-group-info-box-paymode-after -- end

		.scl-info-box {
			position: relative;
			background: linear-gradient(180deg, #fff 0%, #EFFFE9 100%);
			box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
			border-radius: 24rpx;
			position: relative;
			width: 664rpx;
			padding: 48rpx;
			box-sizing: border-box;
			padding-top: 128rpx;
			margin: auto;


			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
			}

			.scl-name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
				margin: 14rpx 0 20rpx 0;
			}

			.scl-con {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.start-btn-box {
				background-size: 100%;
				background-repeat: no-repeat;
				height: 90rpx;
				width: 370rpx;
				text-align: center;

				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: justify;
				font-style: normal;

				text-align: center;
				margin: auto;
				margin-top: 34rpx;
			}
		}

		.scl-group-list-box {
			width: 660rpx;
			// height: 745rpx;
			background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
			box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
			border-radius: 24rpx;
			position: relative;
			margin: auto;
			padding-bottom: 36rpx;
			margin-top: -116rpx;


			// margin-bottom: 68rpx;

			.tit-img-box {
				left: 50%;
				top: -10rpx;
				transform: translateX(-50%);

				width: 460rpx;
				height: 70rpx;
				position: absolute;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.main-wrapper {
				width: 590rpx;
				margin: auto;

				padding-top: 100rpx;
				// background-color: red;

				.scl-list {
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					row-gap: 14rpx;
					padding-bottom: 30rpx;
					border-bottom: 1rpx dashed #979797;

					.scl-box {
						display: flex;
						align-items: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #326876;
						// line-height: 40rpx;
						// text-align: justify;
						font-style: normal;

						.name {
							width: 434rpx;
							// background-color: #333;

						}

						.num {
							width: 28rpx;
							// background-color: indianred;
						}

						.price {
							flex: 1;
							// background: #BCF1E4;
							text-align: right;
						}
					}
				}

				.scl-more-info {
					display: flex;
					flex-direction: column;
					row-gap: 14rpx;
					padding-top: 24rpx;


					.info-item {
						display: flex;
						align-items: center;

						.label {
							width: 400rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #326876;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}

						.price {
							flex: 1;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #326876;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
						}

						.del-price {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #F90101;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
							flex: 1;
						}

						.bold-label {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #326876;
							line-height: 40rpx;
							font-style: normal;
						}

						.bold-price {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 40rpx;
							color: #326876;
							line-height: 56rpx;
							text-align: right;
							font-style: normal;
						}

					}

				}

			}

			// .main-wrapper - end


			.button-wrapper {
				width: 350rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #59E1FF 0%, rgba(1, 192, 255, 0.88) 45%, #86F1FF 100%);
				box-shadow: 0rpx 10rpx 10rpx 0rpx #98EFED, 0rpx 5rpx 0rpx 0rpx #2DC2DC, inset 0rpx 1rpx 3rpx 0rpx rgba(220, 251, 193, 0.5);
				border-radius: 34rpx;
				box-sizing: border-box;


				margin: auto;
				margin-top: 24rpx;

				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: center;
				font-style: normal;
			}


			.close-abs {
				position: absolute;
				right: 34rpx;
				top: 20rpx;

				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}

		}

		.scl-result-container {

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));

			.result-box {

				width: 700rpx;
				box-sizing: border-box;
				// height: 1259rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
				border-radius: 24rpx;


				padding: 120rpx 20rpx 40rpx 20rpx;
				position: relative;


				.tip-name-1 {
					margin: auto;
					width: fit-content;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #326876;
					line-height: 50rpx;
					text-align: center;
					font-style: normal;
				}

				.tip-name-2 {
					margin: auto;
					margin-top: 10rpx;
					width: fit-content;

					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #326876;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
				}

				.tip-name-3 {
					margin: auto;
					margin-top: 30rpx;
					width: fit-content;

					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 30rpx;
				}

				.label {
					margin: auto;
					margin-top: 30rpx;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #333333;
					width: fit-content;


					position: relative;

					&::after {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						right: -29rpx;
						position: absolute;
					}

					&::before {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						left: -29rpx;
						position: absolute;
					}
				}

			}

			.start-btn-box {
				background-size: 100%;
				background-repeat: no-repeat;
				height: 70rpx;
				width: 350rpx;
				text-align: center;
				position: fixed;

				bottom: calc(constant(safe-area-inset-bottom));
				bottom: calc(env(safe-area-inset-bottom));


				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: justify;
				font-style: normal;

				text-align: center;
				margin: auto;
				margin-top: 34rpx;
			}



		}


		.scl-total-report-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));



			.scl-total-report-wrapper {
				width: 700rpx;
				// height: 852rpx;
				box-sizing: border-box;
				padding: 0 20rpx 30rpx 20rpx;
				background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
				box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
				border-radius: 24rpx;
				position: relative;



				.wrapper-box-tit {
					height: 170rpx;
					width: 384rpx;
					position: absolute;
					left: 50%;
					top: -114rpx;
					transform: translateX(-50%);

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.share-abs-wrapper {
					position: absolute;
					right: 20rpx;
					top: 58rpx;

					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #146F9E;
					line-height: 37rpx;
					text-align: center;
					font-style: normal;

					display: flex;
					align-items: center;

					.img {
						width: 26rpx;
						height: 26rpx;

						margin-right: 12rpx;
					}
				}

				.label {
					margin: auto;
					margin-top: 114rpx;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #333333;
					width: fit-content;


					position: relative;

					&::after {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						right: -29rpx;
						position: absolute;
					}

					&::before {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						left: -29rpx;
						position: absolute;
					}
				}

				.tip-1 {
					margin: auto;
					// margin-top: 30rpx;
					width: fit-content;

					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 20rpx;
				}

				.tip-2 {
					margin: auto;
					width: fit-content;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #326876;
					line-height: 37rpx;
					text-align: center;
					font-style: normal;

					margin-bottom: 30rpx;
				}



				.res-table-container {

					.data-conclusion-box {

						.label-wrapper,
						.data-wrapper {
							.col-1 {
								width: 288rpx;
							}

							.col-2 {
								width: 100rpx;
							}

							.col-3 {
								width: 272rpx;
								padding-right: 20rpx;
								box-sizing: border-box;
								text-align: right;
								height: 100%;
								overflow: hidden;

								.img {
									margin-right: 8rpx;
								}
							}

						}

						// .label-wrapper - end

					}
				}

				// .res-table-container - end

				.more-con-box {
					width: 660rpx;
					margin-top: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 46rpx;
					text-align: justify;
					font-style: normal;
				}


			}


		}
	}

	.btn-base {
		width: 270rpx;
		height: 70rpx;
		border-radius: 45rpx;

		font-family: PingFang-SC, PingFang-SC;
		// font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-style: normal;
	}

	.btn-female {
		background: #FCA5C5;
	}

	.btn-normal {
		background: #5ED5FF;
	}





	.data-conclusion-box {
		width: fit-content;
		margin: auto;



		.label-wrapper {
			display: flex;
			width: 660rpx;
			margin: auto;
			border-bottom: 4rpx solid #0B82A2;
			padding-bottom: 16rpx;


			.text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #333333;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}

			.col-1 {
				// width: 48%;
				width: 318rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			.col-2 {
				// width: 28%;
				width: 120rpx;
			}

			.col-3 {
				// width: 24%;
				width: 222rpx;
				padding-right: 20rpx;
				box-sizing: border-box;
				text-align: right;
			}

		}

		.data-wrapper {
			display: flex;
			align-items: center;
			flex-direction: column;
			// margin-bottom: 64rpx;
			width: 660rpx;
			margin-top: 16rpx;
			// border: 1rpx solid #C1C1C1;
			box-shadow: 0px 0px 0px 0.5px #c1c1c1;
			// padding-bottom: 24rpx;

			.head-row,
			.head-row-err {
				display: flex;
				align-items: center;
				width: 100%;
				height: 96rpx !important;
				background: rgba(220, 244, 255, .32);


				.col-1 {
					width: 200rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #393C5A;
						line-height: 96rpx;
						text-align: left;
						font-style: normal;
					}

					// .colon {
					//   font-size: 32rpx;
					//   font-family: PingFangSC, PingFang SC;
					//   font-weight: 500;
					//   color: #393C5A;
					// }
				}

				.col-2 {
					width: 118rpx;
					box-sizing: border-box;

					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #0B82A2;
						line-height: 96rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.col-3 {
					// width: 28%;
					display: flex;
					align-items: center;
					width: 180rpx;

					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;

					line-height: 96rpx;
					text-align: left;
					font-style: normal;
					color: #333333;

					.img {
						margin-left: 8rpx;
						width: 26rpx;
						height: 26rpx;
					}
				}

				.col-4 {
					// width: 24%;
					width: 160rpx;
					box-sizing: border-box;
					padding-right: 20rpx;
					text-align: right;

					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #393C5A;
					line-height: 96rpx;
					font-style: normal;
				}

			}

			.head-row-err {
				background-color: #FFF8F8;

				.col-2 .num {
					color: #F90101;
				}
			}

			.row,
			.row-err {
				display: flex;
				align-items: center;
				width: 100%;
				height: 78rpx;

				.col-1 {
					// width: 32%;
					width: 200rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.text {
						font-family: PingFang-SC, PingFang-SC;
						// font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 78rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.col-2 {
					// width: 16%;
					width: 118rpx;
					box-sizing: border-box;

					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #0B82A2;
						line-height: 78rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.col-3 {
					// width: 28%;
					width: 180rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 78rpx;
					text-align: left;
					font-style: normal;

					.img {
						margin-left: 8rpx;
						width: 26rpx;
						height: 26rpx;
					}
				}

				.col-4 {
					// width: 24%;
					width: 160rpx;
					box-sizing: border-box;
					padding-right: 20rpx;

					text-align: right;

					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #393C5A;
					line-height: 78rpx;
					font-style: normal;
				}

			}



			.row-err {
				background-color: #FFF8F8;

				.col-2 .num {
					color: #F90101;
				}
			}

		}




	}

	// .data-conclusion-box - end

	.detailed-results-box {
		// margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		width: 100%;

		.block-tit-wrapper {
			display: flex;
			align-items: center;

			// padding-left: 40rpx;
			.icon {
				width: 16rpx;
				height: 32rpx;
				background: linear-gradient(180deg, #95BEF1 0%, #1A529A 100%);
				border-radius: 12rpx;
				margin-right: 10rpx;
			}

			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #07356F;
				line-height: 45rpx;
				letter-spacing: 1px;
				text-align: left;
				font-style: normal;
			}
		}

		.p {

			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;

			font-style: normal;
			text-indent: 1.5em;

			text-align: justify;
		}

		.summary-wrapper {

			// padding: 0 40rpx;
			margin-top: 20rpx;
			margin-bottom: 30rpx;

			.tit {
				margin: auto;
				text-align: center;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #185199;
				margin-bottom: 50rpx;

			}
		}

		.block {
			// padding: 0 40rpx;
			// margin-bottom: 40rpx;

			.p {
				// margin-bottom: 30rpx;
			}

			.sub-tit {

				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #195199;
				margin-bottom: 18rpx;
				margin-left: -20rpx;

				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #195199;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
			}

			.sub-sub-tit {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 18rpx;
			}

			.text-list {
				display: flex;
				flex-direction: column;
				row-gap: 16rpx;

				.li {
					width: 694rpx;

					// width: 592rpx;
					height: 75rpx;
					line-height: 75rpx;
					background-image: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, rgba(245, 249, 255, 0.4) 53%, #D8E9FF 100%);
					background-size: 592rpx 75rpx;
					background-repeat: no-repeat;
					border-radius: 2rpx;
					// opacity: 0.43;

					font-size: 34rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					color: #333333;

					padding-left: 20rpx;
				}
			}
		}




	}

	// .detailed-results-box - end

	.dashed-line {
		margin: auto;
		width: 660rpx;
		height: 1rpx;
		margin: 30rpx auto;

		background-image: repeating-linear-gradient(to right,
				#A9C4F2,
				#A9C4F2 10rpx,
				transparent 10rpx,
				transparent 20rpx);
	}

	// .dashed-line - end
</style>